<template>
  <!--    右侧导航    -->
  <div class="card-right">
    <!--     其他功能     -->
    <div class="user-mould">
      <router-link to="./answer">
        <div>
          <img
            src="../assets/images/write-answer.png"
            width="40"
            height="40"
            alt=""
          />
          <span>写回答</span>
        </div>
      </router-link>
      <router-link to="./writing">
        <div>
          <img
            src="../assets/images/write-essay.png"
            width="39"
            height="40"
            alt=""
          />
          <span>写文章</span>
        </div>
      </router-link>
      <router-link to="./invited">
        <div>
          <img
            src="../assets/images/invitation-answer.png"
            width="40"
            height="34"
            alt=""
          />
          <span>邀我答</span>
        </div>
      </router-link>
      <router-link to="./later">
        <div>
          <img
            src="../assets/images/process-later.png"
            width="38"
            height="34"
            alt=""
          />
          <span>稍后答</span>
        </div>
      </router-link>
      <router-link to="">
        <div>
          <img
            src="../assets/images/draft-box.png"
            width="40"
            height="34"
            alt=""
          />
          <span>草稿箱</span>
        </div>
      </router-link>
      <router-link to="/collection">
        <div>
          <img
            src="../assets/images/collect-question.png"
            width="39"
            height="34"
            alt=""
          />
          <span>收藏夹</span>
        </div>
      </router-link>
      <router-link to="">
        <div>
          <img
            src="../assets/images/tip-off.png"
            width="45"
            height="40"
            alt=""
          />
          <span>举报中心</span>
        </div>
      </router-link>
      <router-link to="">
        <div>
          <img
            src="../assets/images/list-rule.png"
            width="38"
            height="40"
            alt=""
          />
          <span>榜单规则</span>
        </div>
      </router-link>
    </div>
    <!--     问答专家     -->
    <div class="answers-great">
      <h4>荣誉榜单</h4>
      <div v-for="(item, index) in honorRoll" :key="index">
        <img :src="$img + item.avatar" alt="" />
        <div>
          <p class="title" @click="$router.push({path:'/people',query:{id:item.id}})">
            {{ item.username
            }}<i :class="index <= 2 ? 'icon-attestation' : ''"></i>
            <span class="rank-right" :class="index <= 2 ? 'rank-light' : ''">
              {{ index + 1 }}
            </span>
          </p>
          <p>回答数量 : {{item.answer_count}}</p>
          <p>帮助人数 : {{item.help_count}}人</p>
        </div>
      </div>
    </div>
    <!--     向你推荐     -->
    <div class="recommend-card" v-if="recommend">
      <h4>向你推荐</h4>
      <p v-for="(item,index) in recommend" :key="index" @click="$router.push({path:'/articleInfo',query:{id:item.id,type:2}})">{{item.title}}</p>
    </div>
    <!--   回到顶部   -->
    <div>
      <router-link to="/hot">
        <div class="feedback"></div>
      </router-link>
      <div @click="gotoTop()" class="icon-to-top"></div>
    </div>
    <p>Copyright©2019 Lawpro 沪ICP备19012546号</p>
  </div>
</template>

<script>
export default {
  name: "navRight",
  data() {
    return {
      honorRoll: null,
      recommend:"",
    };
  },
  created() {
    this.$axios({
      method: "POST",
      url: "api/Main/honorRoll",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    }).then(res => {
      // console.log(res);
      if (res.data.code === 200) {
        this.honorRoll = res.data.data;
        this.creat();
        // console.log(this.honorRoll);
      } else {
        console.log("榜单无数据");
      }
    });
    this.$axios({
      method: "POST",
      url: "api/Main/getrecommend",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    }).then(res => {
      if (res.data.code === 200) {
        this.recommend = res.data.data;
        // console.log(this.honorRoll);
      } else {
        console.log("推荐无数据");
      }
    });
  },
  methods: {
    creat() {
      let item = this.honorRoll;
      item.forEach(item => {
        if (item.username.length > 10) {
          item.username = item.username.slice(0, 10) + "...";
        }
      });
      this.honorRoll = item;
    }
  }
};
</script>

<style scoped lang="less">
.card-right {
  width: 30%;
  /*height: 100%;*/
  border-radius: 2px;
  box-sizing: border-box;

  & > div {
    background-color: #fff;
  }

  & > div + div {
    margin-top: 15px;
  }

  .mine-answer {
    padding: 20px 10px 0;

    p {
      width: 100%;
      padding: 15px 0;
      font-size: 18px;
      color: #7d8178;
      cursor: pointer;

      &:first-child {
        border-bottom: 1px solid #f6f6f6;
      }

      i {
        padding-right: 10px;
        font-size: 20px;
      }
    }
  }

  .user-mould {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    text-align: center;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 1px 0 rgba(237, 237, 237, 0.4);
    a {
      width: 135px;
      color: #000;
      div {
        display: flex;
        flex-direction: column;
        margin: 10px 0;
        font-size: 14px;
        cursor: pointer;

        img {
          margin: 10px auto;
        }
      }
    }
  }

  .recommend-card {
    width: 100%;
    padding-bottom: 1px;

    h4 {
      padding: 20px;
      border-bottom: 1px solid #f6f6f6;
    }

    p {
      margin: 20px;
      font-size: 14px;
      color: #465a33;
      cursor: pointer;
    }
  }

  .answers-great {
    h4 {
      padding: 20px;
      border-bottom: 1px solid #f6f6f6;
    }

    & > div {
      display: flex;
      padding: 20px 20px 15px;
      border-bottom: 1px solid #f6f6f6;
      cursor: pointer;

      img {
        flex-shrink: 0;
        width: 90px;
        height: 70px;
        margin-right: 10px;
      }

      div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        font-size: 14px;
        color: #95998f;

        .icon-attestation {
          display: inline-block;
          width: 17px;
          height: 17px;
          vertical-align: middle;
          background: url("../assets/images/icon-attestation.png") no-repeat;
          background-size: 100% 100%;
        }
        .rank-right {
          float: right;
        }
        .rank-light {
          color: #e90939;
        }

        .title {
          font-weight: bold;
          color: #101010;
          cursor: pointer;

          i {
            margin-left: 10px;
          }
        }
      }
    }
  }
  & > p {
    margin-top: 10px;
    line-height: 35px;
    font-size: 14px;
    color: #7d8178;
  }
}
</style>
